<template>
  <div class='container'>
     <!-- 新增/修改弹框组件 -->
     <el-dialog
     :title="isEdit ? '修改标签':'新增标签'"
     width="400px"
     :visible="showDialog"
     @close="closeDialog"
     >
      <el-form :model="tagsForm" :rules="tagsFormRules" ref="tagsFormRef">
         <el-form-item label="所选学科" label-width="80px">
          <el-select  placeholder="请选择" style="width:100%" v-model="tagsForm.subjectID">
            <el-option :label="item.label"  :value="item.value" v-for="(item,index) in selectList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" label-width="80px"  prop="tagName">
          <el-input autocomplete="off" class="el-input" placeholder="请输入目录名称" v-model="tagsForm.tagName"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <div class="btn-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="deteTages">确 定</el-button>
        </div>
      </div>
     </el-dialog>
  </div>
</template>
<script>
// 导入Api
import { simple } from '@/api/hmmm/subjects.js'
import { add, update } from '@/api/hmmm/tags.js'
export default {
  name: 'tagsDialog',
  data () {
    return {
      // 弹框表单数据对象
      tagsForm: {
        subjectID: null, // 下拉框学科
        tagName: '' // 输入框标签名称
      },
      selectList: [], // 下拉框数据
      // 表单的验证规则
      tagsFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 调用获取弹框下拉数据列表方法
    this.getSelectList()
  },
  props: {
    showDialog: {
      type: Boolean
    },
    isEdit: {
      type: Boolean
    }
  },
  methods: {
    // 取消按钮
    cancel () {
      this.$emit('closeDialog')
    },
    // 确定按钮
    deteTages () {
    // 兜底验证
      this.$refs.tagsFormRef.validate(async valid => {
        if (!valid) return
        this.isEdit ? this.editTages() : this.addTages()
      })
    },
    // 清空表单数据方法
    clearFrom () {
      // 清空弹框表单数据
      this.tagsForm.tagName = null
      this.tagsForm.subjectID = null
    },
    // 弹框关闭
    closeDialog () {
      this.$emit('closeDialog')
      // 清空弹框表单数据
      this.$refs.tagsFormRef.resetFields()
      this.tagsForm.subjectID = null
    },
    // 获取弹框下拉数据列表
    async  getSelectList () {
      const res = await simple()
      this.selectList = res.data
    },
    // 修改逻辑
    async editTages () {
      this.isEdit = true
      const res = await update(this.tagsForm)
      if (res.status === 200) {
        // 提示
        this.$message.success('修改成功')
        // 弹框关闭
        this.closeDialog()
        // 重新渲染表格数据
        this.$emit('updata-list')
      }
    },
    // 添加逻辑
    async addTages () {
      this.isEdit = false
      const res = await add(this.tagsForm)
      // 判断是否添加成功
      if (res.status === 200) {
        // 提示
        this.$message.success('添加成功')
        // 弹框关闭
        this.closeDialog()
        // 重新渲染表格数据
        this.$emit('updata-list')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.btn-footer{
text-align: center;
margin-top: 20px;
}
.el-form-item--medium {
    margin-top: 30px;
}
</style>
